<template>
	<div class="photolist-root">
		<div class="nav">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a data-wid="tab-top-subpage-1.html" v-for="cate in cateList" :key="cate.id" :class="['mui-control-item',cate.id==0?'mui-active':'']" @click="getPhotoIntro(cate.id)">
							{{cate.title}}
						</a>
					</div>
				</div>
			</div>
		</div>
		<ul class="image-container">
			<li v-for="image in imageList" :key="image.id">
				<img v-lazy="image.imgUrl">
			</li>
		</ul>
	</div>
</template>
<style lang="less" scoped>
	.photolist-root{
		overflow: hidden;
		z-index: 1;
	}
	.image-container{
		list-style: none;
		padding: 10px;
		margin: 0;
		background-color: #ccc;
		img[lazy=loading] {
			width: 40px;
			height: 300px;
			margin: auto;
		}
		li{
			text-align: center;
			img{
				max-width: 100% !important;
			}
		}
	}
</style>
<script>
import mui from '../lib/mui/js/mui.min.js'
import Interface from '../interface.js'
export default {
	mounted(){
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
	},
	created(){
		this.getCateList();
		this.getPhotoIntro(0);
	},
	data(){
		return {
			cateList:[],
			imageList:[]
		}
	},
	methods:{
		getCateList(){
			this.axios.get(Interface.getimgcategory).then(result=>{
				if(result.data.status === true)
				{
					result.data.message.unshift({title:'全部',id:0});
					this.cateList = result.data.message;
				}
			})
		},
		getPhotoIntro(id){
			this.axios.get(Interface.getimagesBaseUrl+id).then(result=>{
				if(result.data.status === true)
				{
					for(var i = 0; i < result.data.message.length; i++)
					{
						result.data.message[i].imgUrl = result.data.message[i].imgUrl.replace('ofv795nmp.bkt.clouddn.com','47.89.21.179:8080');
					}
					this.imageList = result.data.message;
				}
			})
		}
	}
}
</script>
